<template>
  <div class="month-range btn1">
    <i class="iconfont">&#xe73a;</i>
    <input type="text" :class="mClass" placeholder="开始月份 - 结束月份" v-model="date">
  </div>
</template>

<script>
/* eslint-disable */
export default {
  name: 'MonthRange',
  data () {
    return {
      date: '',
      mClass: 'month' + Math.round(Math.random()*100)
    }
  },
  watch: {
    date (curr, old) {
      if (curr) {
        const obj = {
          t1: curr.substring(0, 7) + '-01',
          t2: curr.substring(10, curr.length) + '-01'
        }
        this.$emit('getMonthRange', obj)
      }

    }
  },
  mounted () {
    laydate.render({
      elem: '.' + this.mClass,
      type: 'month',
      range: true,
      done: (value) => {
        this.date = value
      }
    })
  }
}
</script>

<style>
.month-range {
  display: none;
}
.month-range input {
  margin-top: -1px;
  background: none;
  color: #4dd5ff;
}
.layui-laydate-range {
  margin-top: 17px;
  width: 450px;
  background: linear-gradient(to right, #184796 0%, #0d2c71 100%);
  border: 1px solid #2f8ae6;
  font-weight: 400;
  border-radius: 4px;
}
.layui-laydate-header {
  font-size: 14px;
  border-bottom: 1px solid #1d519e;
  padding: 0;
  height: 48px;
  line-height: 48px;
  color: #ffe98f;
}
.layui-laydate-header .layui-icon {
  font-size: 12px;
  color: #4dd5ff;
  top: 0;
}
.laydate-month-list>li {
  font-size: 12px;
  margin: 10px 0;
  color: #4dd5ff;
  height: 25px;
  line-height: 25px;
}
.layui-laydate .layui-this {
  border-radius: 4px;
  background: #ffe98f!important;
  color: #0f3b7c!important;
}
.layui-laydate-main {
  width: 50%;
  padding: 0 16px;
  box-sizing: border-box;
}
.layui-laydate-list {
  background: none;
  padding: 0;
}
.layui-laydate-content table {
  display: none;
}
.layui-laydate-list {
  position: static;
}
.layui-laydate-content {
  border: none!important;
  padding: 0;
}
.layui-laydate-footer {
  border-top: 1px solid #1d519e;
}
.layui-laydate-header i.laydate-prev-y {
  left: 0;
}
.layui-laydate-header i.laydate-next-y {
  right: 0;
}
.layui-laydate-header i:hover, .layui-laydate-header span:hover {
  color: #ffe98f;
  transform: scale(1.2);
}
.layui-laydate-content td:hover, .layui-laydate-list li:hover {
  color: #ffe98f;
  background: none;
}
.laydate-footer-btns span {
  background: linear-gradient(to right, rgba(26,123,191,0.8) 0%, rgba(20,49,123,0.8) 100%);
  border: 1px solid #2f8ae6;
  color: #4dd5ff;
  padding: 0 10px;
  border-radius: 4px;
  margin-left: 10px;
  line-height: 24px;
}
.laydate-footer-btns span:hover {
  color: #4dd5ff;
}
.laydate-year-list {
  color: #b1a887;
}
</style>
